<template>
  <div class="carousel_container">
    <div class="swiper-container banner-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination banner-pagination"></div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'

  export default {
    mounted() {
      new Swiper('.banner-container', {
        loop: true,
        autoplay: true,
        spaceBetween: 30,

        pagination: {
          el: '.banner-pagination',
          clickable: true
        },
      })
    },
  }
</script>

<style scoped lang="scss">
  .carousel_container {
    width: 80%;
    height: 100px;
    margin: 0 auto;
    border-radius: 5px;
    border: solid silver 1px;
    
    .swiper-container{
      height: 100%;
    }
    
  }
</style>
